<template>
	<Header />
	<div class="wrap">
		<!-- 视频盒子 -->
		<div class="video_wrap">
			<div class="box">
				<videoPlay width="1060px" height="595px" title="钢铁侠" :src="options.src" :poster="options.poster" @play="onPlay"
					@pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" />
				<div class="video_bottom">
					<div class="video_bottom_left">
						<div class="left_icon">
							<div class="shipin">
								<svg t="1666159780982" class="icon" viewBox="0 0 1024 1024" version="1.1"
									xmlns="http://www.w3.org/2000/svg" p-id="17891" width="20" height="20">
									<path
										d="M855.75751 0H168.438062A170.229956 170.229956 0 0 0 0 168.182077v687.575433A170.229956 170.229956 0 0 0 168.438062 1023.939588h687.319448a172.789805 172.789805 0 0 0 122.104796-46.077282 172.533821 172.533821 0 0 0 46.077282-122.104796V168.182077A170.485941 170.485941 0 0 0 855.75751 0zM100.34608 848.589933V161.0145a68.091983 68.091983 0 0 1 68.091982-60.924405h687.319448a64.764179 64.764179 0 0 1 48.893116 22.270686 55.292738 55.292738 0 0 1 12.03129 45.821296v687.575433a68.091983 68.091983 0 0 1-68.091983 60.924406H161.270485a68.091983 68.091983 0 0 1-60.924405-68.091983z"
										p-id="17892" fill="#7d8090"></path>
									<path
										d="M346.347565 772.818404a53.756828 53.756828 0 0 0 25.59849 6.143637 44.797357 44.797357 0 0 0 25.59849-7.167577l358.378856-215.027313a51.196979 51.196979 0 0 0 0-82.683122l-358.378856-215.283298a53.756828 53.756828 0 0 0-51.19698 0 43.261448 43.261448 0 0 0-20.478791 38.141749v436.966219a44.285387 44.285387 0 0 0 20.478791 38.909705z m69.115923-129.272373V380.393557L634.586559 511.969794z"
										p-id="17893" fill="#7d8090"></path>
								</svg>
							</div>
						</div>
						<span v-if="!homeStore.videoPlay.statisticsBackup">12</span>
						<span v-else>{{ homeStore.videoPlay.statisticsBackup.viewCount }}</span>
						<!-- <span>12</span> -->
						<div class="middle_icon">
							<div class="dianzan"></div>
							<span v-if="!homeStore.videoPlay.statisticsBackup">12</span>
							<span v-else>{{ homeStore.videoPlay.statisticsBackup.praiseCount }}</span>
						</div>
						<div class="right_icon">
							<div class="shoucang"></div>
							<span v-if="!homeStore.videoPlay.statisticsBackup">12</span>
							<span v-else>{{ homeStore.videoPlay.statisticsBackup.favoriteCount }}</span>
						</div>
					</div>

					<div class="video_bottom_right">
						<div class="left">
							<svg t="1666162716894" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="23647" width="20" height="20">
								<path
									d="M910.90944 530.944c-17.24416-6.53312-33.25952-19.68128-48.47616-39.69024-22.75328-29.9008-37.66272-67.64544-46.14144-94.04416-7.20896-22.40512-27.93472-37.1712-51.38432-36.63872-23.53152 0.49152-43.54048 16.05632-49.82784 38.74816l-76.63616 277.42208c-16.42496-15.52384-36.22912-27.32032-58.34752-34.48832-80.91648-26.23488-168.05888 18.26816-194.27328 99.16416-12.6976 39.19872-9.37984 80.97792 9.33888 117.67808 18.7392 36.70016 50.62656 63.8976 89.82528 76.5952a153.8048 153.8048 0 0 0 47.45216 7.53664c65.06496 0 125.70624-41.53344 146.82112-106.7008 0.18432-0.57344 92.52864-334.82752 92.52864-334.82752 29.696 54.19008 67.60448 90.39872 111.57504 106.496 26.39872 9.66656 54.39488-9.6256 54.39488-37.72416v-1.59744c-0.02048-17.01888-10.89536-31.86688-26.84928-37.92896zM510.23872 857.78432c-18.37056-5.95968-33.32096-18.71872-42.10688-35.92192s-10.3424-36.80256-4.38272-55.17312c9.89184-30.55616 38.33856-50.03264 68.83328-50.03264 7.3728 0 14.86848 1.1264 22.24128 3.52256 18.37056 5.95968 33.32096 18.71872 42.10688 35.92192 7.68 15.03232 9.8304 31.88736 6.28736 48.16896l-2.08896 7.55712c-12.51328 37.60128-53.1456 58.20416-90.89024 45.95712zM135.33184 164.6592h618.82368c22.6304 0 40.96-18.3296 40.96-40.96s-18.3296-40.96-40.96-40.96H135.33184c-22.6304 0-40.96 18.3296-40.96 40.96 0 22.60992 18.3296 40.96 40.96 40.96zM135.33184 443.6992h394.09664c22.6304 0 40.96-18.3296 40.96-40.96s-18.3296-40.96-40.96-40.96H135.33184c-22.6304 0-40.96 18.3296-40.96 40.96 0 22.60992 18.3296 40.96 40.96 40.96zM225.34144 640.8192H135.33184c-22.6304 0-40.96 18.3296-40.96 40.96s18.3296 40.96 40.96 40.96h90.0096c22.6304 0 40.96-18.3296 40.96-40.96s-18.35008-40.96-40.96-40.96z"
									p-id="23648" fill="#7d8090"></path>
							</svg>
							<span>音频</span>
						</div>
						<div class="middle">
							<svg t="1666163185626" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="25801" width="20" height="20">
								<path
									d="M198.7 292.7h0.9-0.9zM825.8 292.8c-0.3 0.1-0.6 0-0.9 0-14.8 0-26.9 12-26.9 26.9 0 14.8 12 26.9 26.9 26.9h0.3c44.3 0.2 80.3 36.3 80.3 80.6v312.1c0 20.8-8 39.7-20.9 54-6.1 6.7-13.3 12.4-21.4 16.8-11.4 6.2-24.4 9.9-38.3 9.9H199.6c-11 0-21.4-2.3-31-6.3-8.4-3.5-16.1-8.4-22.7-14.4-16.5-14.8-26.9-36.2-26.9-60V427.1c0-44.5 36.2-80.6 80.6-80.6h-0.4c14.6-0.2 26.4-12.1 26.4-26.8 0-14.8-12-26.9-26.9-26.9-73.7 0.5-133.5 60.5-133.5 134.3v312.1c0 71.4 56.1 129.8 126.5 134 2.6 0.2 5.2 0.4 7.9 0.4H825c26.3 0 50.9-7.7 71.6-20.9 5.5-3.5 10.8-7.4 15.7-11.6 28.7-24.7 47-61.2 47-101.9V427.1c0-73.8-59.8-133.8-133.5-134.3z m-0.4 53.7h0.4-0.4zM825 292.7h0.9-0.9z"
									fill="#7d8090" p-id="25802"></path>
								<path
									d="M298.6 537.8l202.1 96.5c0.2 0.1 0.3 0.1 0.5 0.2 1.3 0.6 2.7 1 4.1 1.4 0.5 0.1 0.9 0.3 1.4 0.4 1.6 0.3 3.3 0.5 5 0.6 0.2 0 0.4 0.1 0.6 0.1 0.5 0 1-0.1 1.5-0.1s1 0.1 1.5 0.1c3.9 0 7.8-0.8 11.6-2.6l201.4-96.2c13.3-6.3 20.5-22 14.7-35.5-6-14.2-22.6-20.3-36.3-13.8l-167.2 79.9c-0.2 0.1-0.4 0-0.4-0.2V159.5c0-11.8-7.1-23.1-18.4-26.6-18.5-5.7-35.4 8-35.4 25.6V567c0 0.2-0.2 0.3-0.4 0.2l-164.2-78.4c-15.9-7.6-35.5 1.8-38.3 20.9-1.6 11.7 5.5 23 16.2 28.1z"
									fill="#7d8090" p-id="25803"></path>
							</svg>
							<span>缓存</span>
						</div>
						<div class="right">
							<svg t="1666163435882" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="27153" width="20" height="20">
								<path
									d="M888.7 314.9c-9.9 0-17.9-8-17.9-17.9V153.6H709.4c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9h187.7c5.2 0 9.4 4.2 9.4 9.4V297c0.1 9.8-7.9 17.9-17.8 17.9z"
									fill="#7d8090" p-id="27154"></path>
								<path d="M486.8 538.8c-7-7-7-18.3 0-25.3L876 123l25.3 25.3-389.2 390.5c-7 7-18.3 7-25.3 0z"
									fill="#7d8090" p-id="27155"></path>
								<path
									d="M512.3 960.1C265 960.1 64.2 759.3 64.2 512c0-240.8 190.9-437.9 429.4-447.7 10.2-0.4 18.7 7.7 18.7 17.9 0 9.6-7.6 17.5-17.2 17.9C275.7 109.1 100 290.4 100 512c0 227.5 184.7 412.2 412.2 412.2 221.6 0 402.8-175.7 411.9-395.1 0.4-9.6 8.3-17.2 17.9-17.2 10.2 0 18.3 8.5 17.9 18.7-9.8 238.5-206.8 429.5-447.6 429.5z"
									fill="#7d8090" p-id="27156"></path>
							</svg>
							<span class="fenxiang">分享</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 视频详情 -->

		<div class="mainWrap">
			<el-card shadow="always" :body-style="{ padding: '20px 30px 30px' }">
				<div class="desc">
					<div class="videoName">
						<div v-if="!homeStore.videoPlay.title" class="title">八八八八</div>
						<div v-else class="title">{{ homeStore.videoPlay.title }}</div>
						<div class="room">加入练习室</div>
					</div>
					<div class="authorMsg">
						<div class="left">
							<!-- <img class="avatarImg" :src="homeStore.videoPlay.creatorBackup.avatar" alt=""> -->
							<span v-if="!homeStore.videoPlay.creatorBackup" class="authorName">12</span>
							<span v-else class="authorName">{{ homeStore.videoPlay.creatorBackup.name }}</span>
							<div class="plus">
								<span class="add">+</span>
								<span>关注</span>
							</div>
						</div>
						<div class="time">发布时间：10-16</div>
					</div>
					<div v-if="!homeStore.videoPlay.summary" class="container">
						转载自普宁倾扬-婉婉老西
					</div>
					<div v-else class="container">
						<div  v-for="(sum,idx) in homeStore.videoPlay.summary.split('\n')" :key="idx">
							<div style="margin-bottom:10px"> {{ sum }}</div>
						</div>
						
					</div>

					<div class="top">
						<span class="videoAuthor">原创作者：</span>
						<span v-if="!homeStore.videoPlay.creatorBackup" class="name">八八八八</span>
						<span v-else class="name">{{ homeStore.videoPlay.creatorBackup.name }}</span>
					</div>
					<div class="bottom">
						<span class="videoAuthor">兴趣技能：</span>
						<span v-if="!homeStore.videoPlay.relevancyAvocations">123</span>
						<span v-else class="name" v-for="rele in homeStore.videoPlay.relevancyAvocations">{{ rele }}、 </span>
					</div>

				</div>
			</el-card>
			<el-card shadow="always" :body-style="{ padding: '20px' }" style="margin:20px 0">
				<span v-if="!homeStore.videoPlay.requireBackup">1</span>
				<el-badge v-else v-for="require in homeStore.videoPlay.requireBackup" :key="require.requireType"
					style="margin-right:40px;" :value="100" :max="10" class="item">
					<el-button round color="#f9ebf1">{{ require.requireDesc }}</el-button>
				</el-badge>
			</el-card>
			<el-card shadow="always" :body-style="{ padding: '20px' }">
				<!-- TA的相关 -->
				<div class="aboutBox">
					<div class="textAbout">TA的相关</div>
					<div v-if="!homeStore.videoPlay.recommendMineBackup" class="aboutVideo">
						1
					</div>
					<div v-else class="aboutVideo">
						<AboutDesc :about="about" v-for="about in homeStore.videoPlay.recommendMineBackup" :key="about.id" />
					</div>
				</div>
				<div class="recommendBox">
					<div class="textAbout">更多推荐</div>
					<div v-if="!homeStore.videoPlay.recommendMineBackup" class="aboutVideo">
						1
					</div>
					<div v-else class="aboutVideo">
						<AboutDesc :about="about" v-for="about in homeStore.videoPlay.recommendOtherBackup" :key="about.id" />
					</div>
				</div>
			</el-card>
			<!-- 相关练习室 -->
			<el-card shadow="always" class="slot_header">
				<div slot="header">
					<span class="header_title">相关练习室</span>
					<div class="header_img">
						<img
							src="https://rs.dance365.com/photo/ff80808183d5a6490183d71289133a47_rs_38b3ae957d0e4b65b8b53be9b54779ac.jpg">
					</div>
					<div class="header_right">
						<div class="header_right_title">小河淌水</div>
						<div class="header_right_contect">2个内容.一人已加入</div>
						<div class="header_right_btn">
							加入
						</div>
					</div>
				</div>
				<!-- card body -->
			</el-card>
			<!-- 留言 -->
			<el-card shadow="always" :body-style="{ padding: '20px' }" style="margin:20px 0">
				<div class="comment">
					<div class="login">
						<div class="avatar">
							<svg style="margin-right=10px;" t="1666163519958" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="12153" width="40" height="40">
								<path
									d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0zM213.333 832A298.667 298.667 0 0 1 512 533.333a170.667 170.667 0 1 1 170.667-170.666A170.667 170.667 0 0 1 512 533.333 298.667 298.667 0 0 1 810.667 832z"
									p-id="12154" fill="#bfbfbf"></path>
							</svg>
						</div>
						<div class="tip">
							<a class="toLogin" href="">登录</a>
							<span>后发表留言</span>
						</div>
					</div>
					<div class="message">
						留言（0）
					</div>

				</div>
				<div class="footer">
					<img class='noMsg' src="https://rs.dance365.com/img/no_message@3x.2f295517.png" alt="">
					<p>暂无留言</p>
				</div>
			</el-card>

		</div>
	</div>
	<Footer />


</template>

<script setup lang="ts">
import AboutDesc from './aboutDesc/index.vue'
import { onMounted, reactive, ref } from 'vue';
import { videoPlay } from 'vue3-video-play'
import 'vue3-video-play/dist/style.css'
import useHomeStore from '@/stores/home';
import { nextTick } from 'vue'
import homeApi, {
	type VideoPlayModel
} from "@/api/mockHome";
const homeStore = useHomeStore()
console.log(homeStore)

onMounted(() => {
	homeStore.getVideoPlay()
})

const options = reactive({
	src: "http://vjs.zencdn.net/v/oceans.mp4", //视频源
	poster: 'https://rs.dance365.com/photo/c493fe24e5cc405ab4c2c25170463a30_rs_7b129a389f204b0caf948a7e81334961.jpg', //封面
})
const onPlay = (ev: any) => {
	console.log('播放')
}
const onPause = (ev: any) => {
	console.log(ev, '暂停')
}
const onTimeupdate = (ev: any) => {
	console.log(ev, '时间更新')
}
const onCanplay = (ev: any) => {
	console.log(ev, '可以播放')
}
</script>
<style scoped lang="scss">
.video_wrap {
	width: 100%;
	height: 664px;
	background-color: #1e1e1e;
	margin: 0 auto;
	padding-top: 1px;

	.box {
		width: 100%;
		display: flex;
		flex-direction: column;

		align-items: center;
		margin-top: 10px;

		.video_bottom {
			display: flex;
			justify-content: space-between;
			width: 1060px;
			height: 59px;
			background-color: #121212;
			padding: 18px 20px;
			box-sizing: border-box;

			.video_bottom_left {
				display: flex;

				.left_icon {
					display: flex;

					.shipin {
						margin: 0 10px 0 0;
					}
				}

				span {
					margin-right: 45px;
					color: #7d8090;
				}

				.middle_icon {
					display: flex;

					.dianzan {
						margin: 0 10px 0 0;
						width: 20px;
						height: 20px;
						background: url(https://rs.dance365.com/img/details_love.17436999.png) no-repeat;
						background-size: 100% 100%;
					}

					.dianzan:hover {
						width: 20px;
						height: 20px;
						background: url(https://rs.dance365.com/img/details_love_into.050a58f6.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.right_icon {
					display: flex;

					.shoucang {
						width: 20px;
						height: 20px;
						background: url(https://rs.dance365.com/img/details_collectio.5152d910.png) no-repeat;
						background-size: 100% 100%;
						margin: 0 10px 0 0;
					}

					.shoucang:hover {
						width: 20px;
						height: 20px;
						background: url(https://rs.dance365.com/img/details_collectio_into.d5975887.png) no-repeat;
						background-size: 100% 100%;
						margin: 0 10px 0 0;
					}
				}
			}

			.video_bottom_right {
				display: flex;
				color: #7d8090;
				font-size: 14px;

				span {
					margin-left: 10px;
					padding-right: 26px;
					border-right: 1px solid #7d8090;
					vertical-align: 6px;

				}

				.left,
				.middle,
				.right {

					margin-left: 26px;
				}

				.right {
					border-right: none;

					.fenxiang {
						border-right: none;
					}
				}


			}
		}


	}
}

.slot_header {
	width: 1060px;
	margin: 30px auto;

	.header_title {
		color: #111;
		font-size: 24px;
		margin-bottom: 10px;
	}

	.header_img {
		img {
			margin: 23px 0px;
			width: 240px;
			height: 134px;
			border-radius: 4px;
			float: left;
		}
	}

	.header_right {
		float: left;
		margin: 23px 30px 23px 30px;

		.header_right_title {
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #111;
			line-height: 24px;
			height: 60px;
		}

		.header_right_contect {
			font-size: 14px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #7d808f;
			height: 40px;
		}

		.header_right_btn {
			width: 56px;
			height: 32px;
			border: 1px solid #f93684;
			border-color: #f93684;
			font-size: 12px;
			color: #f93684;
			background-color: #feebf3;
			border-radius: 20px;
			text-align: center;
			line-height: 32px;
		}
	}

}
</style>
<style scoped>
.wrap {
	width: 100%;
	height: 100%;
	background-color: #f5f7f9;
}

.mainWrap {
	width: 1060px;
	height: 100%;
	margin: 0px auto;
}

.videoName {
	/* width: 1000px; */
	font-size: 20px;
	height: 42px;
	/* padding: 20px 30px 30px 30px; */
}

/* 加入练习室按钮 */
.room {
	float: right;
	width: 106px;
	height: 40px;
	font-size: 16px;
	text-align: center;
	line-height: 40px;
	border-radius: 20px;
	color: #f93684;
	border: 1px solid #f93684;
	cursor: pointer;
}

.title {
	float: left;
}

.authorMsg {
	/* width: 300px; */
	height: 40px;
	padding-top: 19px;

}

.left {
	float: left;
}

.avatarImg {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 9px;
	float: left;
}

.authorName {
	font-size: 16px;
	line-height: 40px;
	height: 40px;
	margin-right: 50px;
	float: left;

}

.plus {
	color: #f93684;
	background-color: #f9ebf1;
	border-radius: 20px;
	font-size: 14px;
	text-align: center;
	padding: 10px 0;
	border: 1px solid #f9ebf1;
	width: 86px;
	display: inline-block;
	cursor: pointer;
}

.add {
	font-weight: 100;
}

.plus:hover {
	background-color: #fed7e6;
}

.time {
	color: #b1b5c1;
	vertical-align: middle;
	float: right;
	margin-top: 13px;
}

.container {
	/* height: 40px; */
	/* line-height: 40px; */
	border-bottom: 1px solid #e3e3e3;
	padding-top: 30px;
	padding-bottom: 10px;
	font-size: 16px;

}

.top {
	margin: 20px 0 10px;
}

.videoAuthor {
	font-size: 16px;
	;
}

.name {
	color: #f93684;
}

/* ta的相关 */
.aboutBox,
.recommendBox {
	width: 1020px;
	padding: 23px 0px 30px;
	margin: 0 20px;

}

.aboutVideo {
	display: flex;
}

.textAbout {
	padding-bottom: 23px;
	color: #111;
	font-size: 24px;
}

/* 留言 */
.comment {
	padding: 20px 20px 30px;
}

/* 未登录提示 */
.login {
	margin-bottom: 20px;
	display: flex;
	/* justify-content: space-around;  */
}

.avatar {
	padding-right: 10px
}

.tip {
	flex: 1;
	display: flex;
	justify-content: center;
	width: 970px;
	height: 62px;
	background-color: #f5f7f9;
	border-radius: 4px;
	border: 1px solid #eaecf0;
	/* line-height: 60px; */
}

.toLogin,
.tip span {
	font-size: 15px;
	line-height: 60px;
	height: 60px;
}

.toLogin {
	color: #f93684;
	margin: 0 15px;
	cursor: pointer;
}

.tip span {
	color: #b1b5c1;
}

/* 留言 */
.message {
	font-size: 24px;
	color: #111;
	line-height: 40px;
	border-bottom: 1px solid #eaecf0;
	padding-bottom: 15px;
}

.footer {
	padding-top: 16px;
}

.noMsg {
	display: block;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

.footer p {
	display: block;
	margin: 20px auto 40px;
	color: rgb(177, 181, 193);
	text-align: center;
}
</style>